<template>
	<div class="shop">
	<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>商城</ion-title>
  </ion-toolbar>
</ion-header>
  <ion-content>
		<div class="shoplist"  v-if="typeList != null && typeList.length > 0">
				<div class="listbox1" v-for="(vanType,index) in typeList" :key="index" @click="openProductsModal(index)">
						<div class="box_left">
							<img :src="vanType.main_image" v-if="vanType && vanType.main_image !=null" />
							<img src="../assets/images/p1.jpg" v-else />
						</div>
						<div class="box_center">
							<h3 class="tit">{{vanType.name}}</h3>
							<!-- <span class="spec">{{vanType.type_name}}</span> -->
							<p class="price">
								<strong class="cprice">￥<em>{{vanType.min_sale_price}} - {{vanType.max_sale_price}}</em></strong>
								<!-- <span class="uprice">{{vanType.max_sale_price}}</span> -->
							</p>
						</div>
						<div class="box_right">
							<i class="iconfont icon-gouwuche"></i>
						</div>
					</div>
			<ion-infinite-scroll @ionInfinite="onScroll">
				<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中…">
				
				</ion-infinite-scroll-content>
			</ion-infinite-scroll>
		</div>
    <div class="blankDiv " v-else>
           <span > 还没产品，快去添加吧 ~  </span> 
        </div>
	</ion-content>
	</div>
</template>
<script>
// @ is an alias to /src
import typeProductsModal from "@/components/vanTypeProducts.vue";
import { getVanTypeList, getTypeProducts } from "@/api/vanProducts.js";
import baseUtil from "@/utils/baseUtil.js";

export default {
  name: "vanTypes",
  components: {},
  data() {
    return {
      typeList: [],
      param: {
        page: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    async openProductsModal(index) {
      // console.log("openProductsModal-index:", index);
      let typeId = this.typeList[index].id;
      let resp = await getTypeProducts(typeId);
      // console.log('openProductsModal:',resp);
      if (resp.code != 0 || resp.data == null || resp.data.productList == null)
        return;
      // console.log('openProductsModal:',resp);
      let vanTypeProducts = this.typeList[index];
      vanTypeProducts.productList = resp.data.productList;
      // console.log('vanTypeProducts:',vanTypeProducts);
      const productsModal = await this.$ionic.modalController.create({
        component: typeProductsModal,
        cssClass: ["--background:blank"],
        componentProps: {
          data: {
            content: "New Content"
          },
          propsData: {
            vanType: vanTypeProducts
          }
        }
      });
      await productsModal.present();
      const { data } = await productsModal.onDidDismiss();
      if (data && data.result == "cart") this.$router.push({ name: "cart" });
    },

    async onScroll(e) {
      // console.log('home-onScroll-滚动事件:',e);
      this.param.page += 1;
      // console.log('home-onScroll-param:',this.param);
      let resp = await getVanTypeList(this.param);
      // console.log('home-onScroll-resp:',resp);
      if (baseUtil.isNotBlankObjs(resp) && resp.code != null) {
        if (resp.code == 0) {
          if (resp.data != null && resp.data.length > 0) {
            resp.data.typeList.forEach(element => {
              this.typeList.push(element);
            });
          } else {
            e.target.disabled = true;
            // console.log('这里是底线');
          }
        } else this.presentToast(resp.warnMessage, "primary");
      }
      e.target.complete();
      // console.log('home-onScroll-orderList:',this.orderList);
    },
    async init() {
      let resp = await getVanTypeList(this.param);
      console.log("resp:", resp);
      if (resp.data != null) {
        this.typeList = resp.data.typeList;
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style>
.shoplist {
  height: auto;
  overflow: hidden;
}
</style>